import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import _ from 'lodash';
import { CaretLeftOutlined, CaretRightOutlined, InfoCircleOutlined } from '#/utils/antdIcons.js';
import { getGansuStations } from '@/pages/GanSuDaTang/services';
import { PageLoading, TRDefault } from '@/components';
import { HeaderSearch } from '@/pages/GanSuDaTang/Report/Week/components/headerSearch';
import { useTRState } from '#/utils/trHooks';
import styles from './index.less';
import { Button, Modal, Tooltip } from 'antd';
import { CompanyTable } from '@/pages/GanSuDaTang/Report/Week/components/companyTable';

const MyComponent = ({ menuCode }) => {
  const [state, setState] = useTRState({
    dataSource: [],
    spinning: true,
    loading: false,
    error: '',
    stations: [],
  });

  const [isFullScreenEcharts, setIsFullScreenEcharts] = useState(false); // 是否为图表全屏展示
  const [isFullScreenTable, setIsFullScreenTable] = useState(false); // 是否为表格全屏展示

  useEffect(() => {
    fetchPower().then();
  }, []);

  const fetchPower = async () => {
    // 数据权限
    const { error, stations } = await getGansuStations(menuCode);
    setState({
      error,
      stations,
      spinning: false,
    });
  };

  const getClassName = () => {
    let classNameEcharts = styles.charts;
    let classNameTable = styles.table;
    if (isFullScreenEcharts) {
      classNameEcharts = `${styles.charts} ${styles.chartsFullWidth}`;
      classNameTable = `${styles.table} ${styles.tableNoWidth}`;
    } else if (isFullScreenTable) {
      classNameEcharts = `${styles.charts} ${styles.chartsNoWidth}`;
      classNameTable = `${styles.table} ${styles.tableFullWidth}`;
    }

    return {
      classNameEcharts,
      classNameTable,
    };
  };

  const dataAnalysis = () => {
    Modal.info({
      title: '复盘分析',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {},
      onCancel: () => {},
      content:
        ' 118.93万千瓦装机参加现货交易，本周上网电量0.58亿千瓦时，较中长期合约电量多/少-3096万千瓦时，平均电价361.81元/兆瓦时，较中长期合约电价高39.54元/兆瓦时。\n' +
        '\n' +
        '        中长期合约电量0.89亿千瓦时，平均电价322.26元/兆瓦时；\n' +
        '        省内现货电量-3680万千瓦时，占比-63.91%，平均电价259.9元/兆瓦时。\n' +
        '        省间现货电量584万千瓦时，占比10.14%，平均电价319.18元/兆瓦时 。',
    });
  };

  if (state.spinning) return <PageLoading />;
  if (state.error) return <TRDefault type="error" message={state.error} />;
  if (!state.stations?.length) return <TRDefault type="lock" />;

  return (
    <div className={styles.container}>
      <div className={styles.toolbar}>
        <HeaderSearch setFatherState={setState} stations={state.stations} />
      </div>
      <div className={styles.contentAll}>
        <div className={styles.box}>
          <div className={styles.hint}>
            <h3>现货交易周报</h3>
            <Tooltip
              placement={'bottomRight'}
              title={
                <div>
                  <div>
                    1.上表中，无特别说明，价格、收入均为含税电价，变动成本不含税。中长期合约电量包括代购市场电量和中长期合约电量。
                  </div>
                  <div>
                    2.其他收入包括调频收入、成本补贴、启停补偿费用等（不含新能源补贴），此为含税收入。
                  </div>
                  <div>3.火电、水电统计到公司，风电、光伏统计到类别即可。</div>
                </div>
              }
            >
              <InfoCircleOutlined />
            </Tooltip>
          </div>
          <Button
            style={{ padding: 0, color: '#ffffff' }}
            type="link"
            onClick={_.debounce(dataAnalysis, 500)}
          >
            数据分析
          </Button>
        </div>
        <div className={styles.content}>
          <div className={getClassName().classNameEcharts}>
            echarts
            <div
              className={styles.leftArrow}
              onClick={() => {
                setIsFullScreenEcharts(!isFullScreenEcharts);
              }}
            >
              {isFullScreenEcharts ? <CaretLeftOutlined /> : <CaretRightOutlined />}
            </div>
          </div>
          <div className={getClassName().classNameTable}>
            <div
              className={styles.rightArrow}
              onClick={() => {
                setIsFullScreenTable(!isFullScreenTable);
              }}
            >
              {isFullScreenTable ? <CaretRightOutlined /> : <CaretLeftOutlined />}
            </div>
            <div className={styles.tableScroll}>
              <CompanyTable dataSource={state.dataSource} loading={state.loading} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default connect(({ global }) => ({
  menuCode: global.configure.menuCode,
  buttonPermissions: global.configure.buttonPermissions,
}))(MyComponent);
